<template>
	<view class="container">
		<lk-topbar :title="title" :backcolor="backcolor" @back="back"></lk-topbar>
		<lk-question v-if="screType == 'quest'" :sindex="sindex" @changeindex="change"></lk-question>
		<lk-action v-if="screType == 'action'" :sindex="sindex" :className='className' :mirrorImage="mirrorImage"
			:introduction="introduction" @changeindex="change"></lk-action>
		<lk-game v-if="screType == 'game'" :sindex="sindex" @changeindex="change" :mirrorImage="mirrorImage"
			:introduction="introduction"></lk-game>
		<view class="content" v-if="screType == 'result' && result">
			<view class="h64">帕金森快速自查</view>
			<view class="h64">评估时间：{{result.time}}</view>
			<view class="scoreBox">
				<view class="scorebg" :style="{'transform':`rotate(${360*result.score/18}deg)`}"></view>
				<view class="scorebg1" v-show="result.score<9"></view>
				<view class="scorebg2" v-show="result.score>9"></view>
				<view class="scoreTxt">
					{{result.score}}分
				</view>
			</view>

			<view class="flex flex-jcsa mt40">
				<view class="btn" @click="path('/plugins/screeningdetail/index')">重新测试</view>
				<view class="btn" @click="reLaunch">返回首页</view>
			</view>

			<view class="mt40">评估结果：</view>

			<view class="result">- {{result.recommendation}}</view>
			<!-- <view class="result">- 不能判断您是否患有帕金森病，建议您定期体检，若已有症状持续不缓解请咨询神经专科医生。</view> -->
		</view>
	</view>
</template>

<script>
	import lkQuestion from '../../components/lk-question/index.vue'
	import lkAction from '../../components/lk-action/index.vue'
	import lkGame from "../../components/lk-game/index.vue"
	import Audio from '../../core/audio.js'
	import equipment from '../../core/equipment.js'
	export default {
		name: "",
		data() {
			return {
				showSindex: false,
				screType: "quest",
				sindex: 0,
				sample: {},
				audio: "",
				result: {},
				className: "",
				mirrorImage: false,
				timer: null,
				timers:null,
				introduction: '',
				title: '',
				backcolor: '#FFFFFF',
			}
		},
		components: {
			lkQuestion,
			lkAction,
			lkGame
		},
		watch: {
			sindex: {
				immediate: true,
				handler(val) {
					val++;
					this.backcolor = this.screType == 'quest' ? '#f5f5f5' : '#ffffff';
					this.title = this.screType != 'result' ? '帕金森快速自查' + val + '/15' : '帕金森快速自查';
				}
			}
		},
		methods: {
			back() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['退出测试', '重新测试'],
					success(res) {
						Audio.audioCtx.stop();
						if (res.tapIndex == 0) {
							uni.showModal({
								title: '提示',
								content: "是否确定退出",
								success(res) {
									if (res.confirm) {
										_this.$routeJump.back()
									}
								}
							})
						} else if (res.tapIndex == 1) {
							uni.showModal({
								title: '提示',
								content: "是否确定重头测试",
								success(res) {
									if (res.confirm) {

										uni.showLoading({
											title: "加载中..."
										})
										_this.sindex = -1;
										_this.screType = '';
										setTimeout(res => {
											uni.hideLoading();
											_this.sindex = 0;
											_this.screType = 'quest';
											_this.sample = {};
										}, 300)
									}
								}
							})
						}
					}
				})

			},
			//提交数据
			upData() {
				let _this = this;
				_this.$utils.request({
					url: "/patient/quick_screening/",
					method: "POST",
					data: {
						sample: _this.sample
					}
				}).then(res => {
					uni.hideLoading()
					_this.result = res.data
				})

			},
			// 赋值
			assignDate(objName, data, screType, audioUrl, className = '') {
				this.sample = Object.assign(this.sample, {
					[objName]: data,
				})
				uni.showLoading({
					title: "加载中..."
				})
				this.screType = '';
				clearTimeout(this.timers);
				this.timers = setTimeout(() => {
					this.className = className;
					uni.hideLoading();
					this.screType = screType;
					Audio.audio(audioUrl, () => {

					})
				}, 1000)
			},

			/**
			 * @param {Object} e 子组件返回的题数
			 */
			change(e) {
				(this.sindex > 15) && (this.showSindex = false);
				this.sindex = e.sindex;
				if (this.sindex < 9) {
					this.screType = 'quest';
				} else if (this.sindex == 9 && e.data) {
					this.assignDate('questions', e.data, 'game', 'screeningGameLeft')
					this.introduction = '左手快速点击';
					this.mirrorImage = true;
				} else if (this.sindex == 10 && e.data) {
					this.assignDate('game_performance_dual_left', e.data, 'game', 'screeningGameRight')
					this.mirrorImage = false;
					this.introduction = '右手快速点击';
				} else if (this.sindex == 11 && e.data) {
					this.assignDate('game_performance_dual_right', e.data, 'action', 'screeningActionPromptTLeft',
						'R-02-05');
					this.introduction = '左侧肢体';
					this.mirrorImage = true;
				} else if (this.sindex == 12 && e.data) {
					this.assignDate('left_tremor', e.data, 'action', 'screeningActionPromptSLeft', 'R-02-05');
					this.introduction = '用力快速跺左脚';
					this.mirrorImage = true;
					this.timer = setInterval(() => {
						if (this.className == 'R-02-05') {
							this.className = 'R-05-2'
						} else {
							this.className = 'R-02-05'
						}
					}, 500)
				} else if (this.sindex == 13 && e.data) {
					clearInterval(this.timer);
					this.mirrorImage = false;
					this.assignDate('left_brady', e.data, 'action', 'screeningActionPromptTRight', 'R-02-05');
					this.introduction = '右侧肢体';
				} else if (this.sindex == 14 && e.data) {
					this.mirrorImage = false;
					this.assignDate('right_tremor', e.data, 'action', 'screeningActionPromptSRight', 'R-02-05');
					this.introduction = '用力快速跺右脚';
					this.timer = setInterval(() => {
						if (this.className == 'R-02-05') {
							this.className = 'R-05-2'
						} else {
							this.className = 'R-02-05'
						}
					}, 500)
				} else if (this.sindex == 15 && e.data) {
					clearInterval(this.timer);
					this.sample = Object.assign(this.sample, {
						right_brady: e.data,
					})
					uni.showLoading({
						title: "提交数据中..."
					})
					this.screType = 'result'
					this.upData()
				}
			},
			reLaunch() {
				this.$routeJump.reLaunch('/pages/index/index')
			},
			// 页面跳转
			path(url) {
				this.$routeJump.navigateTo(url)
			}
		},
		onUnload() {
			equipment.stop(() => {})
			Audio.audioCtx.stop();
			Audio.audioCtx.destroy();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.scoreBox {
			width: 360rpx;
			height: 360rpx;
			margin: 160rpx auto;
			background: #f0b0ae;
			border-radius: 50%;
			position: relative;
			overflow: hidden;

			.scorebg {
				width: 360rpx;
				height: 360rpx;
				position: absolute;
				z-index: 1;
				background-color: #a91a2e;
				clip: rect(0rpx 180rpx 360rpx 0rpx);

			}

			.scorebg1 {
				width: 180rpx;
				height: 360rpx;
				position: absolute;
				z-index: 2;
				background-color: #f0b0ae;
			}

			.scorebg2 {
				width: 180rpx;
				height: 360rpx;
				position: absolute;
				right: 0;
				z-index: 2;
				background-color: #a91a2e;
			}

			.scoreTxt {
				width: 260rpx;
				height: 260rpx;
				line-height: 260rpx;
				text-align: center;
				background: #fff;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				z-index: 10;
				color: #a91a2e;
				font-size: 42rpx;
				font-weight: bold;
			}
		}

		.result {
			color: #a91a2e;
		}
	}

	.btn {
		width: 160rpx;
		height: 76rpx;
		line-height: 76rpx;
		background-color: $uni-theme-color;
	}
</style>
